<template>
  <div class="login-container">
    <vue-particles color="#478dc8" :particle-opacity="0.8" :particles-number="40" shape-type="circle" :particle-size="2" lines-color="#478dc8" :lines-width="1" :line-linked="true" :line-opacity="0.6" :lines-distance="140" :move-speed="5" :hover-effect="false" hover-mode="repulse" :click-effect="true" click-mode="push"></vue-particles>
    <div id="login">
      <div class="title">后台管理系统</div>
      <div class="main">
        <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
          <div class="borderAngle">
            <div class="borderAngle-leftTop"></div>
            <div class="borderAngle-rightTop"></div>
            <div class="borderAngle-leftBottom"></div>
            <div class="borderAngle-rightBottom"></div>
          </div>
          <el-form-item prop="username">
            <i class="iconfont icon-zhanghao" />
            <input type="text" ref="username" class="input" v-model="loginForm.username" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="password">
            <i class="iconfont icon-mima2" />
            <input type="password" key="password" ref="password" class="input" v-model="loginForm.password" placeholder="密码" />
          </el-form-item>
          <el-form-item prop="code">
            <i class="iconfont icon-yanzhengma6" />
            <input type="text" ref="verification" v-model="loginForm.code" placeholder="验证码" class="input locate" maxlength="4" @keyup.enter="handleLogin" />
            <img :src="'data:image/png;base64,' + captcha" @click="lodeCode" class="verification" />
          </el-form-item>
          <el-form-item>
            <el-button class="submit" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import './login.scss'
import { validUsername } from '@/utils/validate'
import userApi from '@/api/user'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (validUsername(value)) {
        callback(new Error('请输入正确用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      captcha: '',
      requestId: '',
      loginForm: {
        username: '',
        password: '',
        code: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入正确用户名', trigger: 'blur' },
          { max: 20, message: '长度最大20个字符', trigger: 'blur' },
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [
          { required: true, message: '请输入正确密码', trigger: 'blur' },
          { max: 15, message: '长度最大15个字符', trigger: 'blur'},
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  mounted() {
    this.lodeCode()
  },
  methods: {
    // 获取验证码
    async lodeCode() {
      const params = { width: 100, height: 48 }
      const res = await userApi.loadCaptcha(params)
      if (res) {
        this.requestId = res.requestId
        this.captcha = res.captcha
      }
    },
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const formData = this.$deepClone(this.loginForm)
          formData.requestId = this.requestId
          formData.password = this.$toMD5(formData.password)
          userApi.login(formData).then(res=>{
            this.getPermission()
          })
          this.loading = false
        }
      })
    },
    // 获取权限
    getPermission() {
      this.$store
        .dispatch('user/getInfo')
        .then(res => {
          this.$router.push({ path: '/dashboard' })
        })
        .catch(res => {
          this.$router.push({ path: '/login' })
        })
    }
    // getUserInfo() {
    //   this.$store.dispatch('user/getUserInfo').then((res) => {})
    // },
  }
}
</script>
